import React from "react";
import "./index.less";

function index({ cateProductList }) {
    const listItem = cateProductList.map((item) => {
        return (
            <div className="cate-product-item-container" key={item.key}>
                <div
                    className="left-img"
                    style={{
                        background: `url(${item.template.listImages})`,
                        backgroundSize: "100% 100%",
                    }}
                ></div>
                <div className="right-info">
                    <div className="product-title">{item.name}</div>
                    <div className="product-desc">{item.template.displayName}</div>
                    <div className="product-full"></div>
                    <div className="product-price-container">
                        <div>
                            <span>￥</span>
                            <span>{item.template.retailPrice}</span>
                        </div>
                        <div className="add-btn"></div>
                    </div>
                </div>
            </div>
        );
    });

    return <>{listItem}</>;
}

export default index;
